<!--  -->
<template>
  <el-form :inline="true" label-position="right" size="small" class="filter-form-inline">
    <el-row :gutter="40" style="margin-left: 0px;margin-right:0px;">
      <el-col :span="8">
        <el-form-item label="流程编号：" style="width: 100%;">
          {{ detailData.processNo }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间：" style="width: 100%;">
          {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人：" style="width: 100%;">
          {{ detailData.initiator }}
        </el-form-item>
      </el-col>

      <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
        <item-title title="基本信息" />
      </el-col>

      <el-col :span="8">
        <el-form-item label="配送名称：" style="width: 100%;">
          {{ detailData?.data?.distribute?.distributeName }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="盘点日期：" style="width: 100%;">
          {{ dateFormat("yyyy-mm-dd",detailData?.data?.checkTime) }}
        </el-form-item>
      </el-col>

      <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
        <item-title title="盘点产品明细" />
      </el-col>

      <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
        <el-table header-cell-class-name="table-header" :data="detailData?.data?.checkProductDetails" border>
          <el-table-column label="序号" type="index" width="50" align="center" />
          <el-table-column label="通用名" prop="product.productPopularName" align="center" />
          <el-table-column label="商品名" prop="product.productName" align="center" />
          <el-table-column label="批准文号" prop="product.approvalNumber" align="center" />
          <el-table-column label="包装规格" prop="product.packSpecs" align="center" />
          <el-table-column label="库存数量" prop="checkCount" align="center" />
        </el-table>
      </el-col>

    </el-row>
  </el-form>
</template>

<script>
import {reactive, toRefs, watch} from "vue";

export default {
  props: {
    detailData: {
      type: Object,
      default() {
        return {
          data: {},
        };
      },
    },
  },
  setup(props, context) {
    const data = reactive({
      detailData: {},
    });

    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          data.detailData = newval;
          console.log(newval);
        }
      },
      { immediate: true, deep: true }
    );

    return {
      ...toRefs(data),
    };
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>